<template>
<!-- total为0 不展示 -->
  <div class="todo-footer" v-show="total">
    <label for="">
        <!-- <input type="checkbox" :checked="isAll" @change="checkAll" > -->
        <input type="checkbox" v-model="isAll">
    </label>
    <span>
        <span>已完成{{doneTotal}}</span>/全部{{total}}
    </span>
    <button class="btn btn-danger" @click="clearAll" >清除已完成任务</button>
  </div>
</template>

<script>
export default {
name:'Foottt',
props:['todoss','checkAllTodo','clearAllTodo'],
// 计算属性
computed:{
    // 总数
    total(){
        return this.todoss.length
    },
//    已完成数
doneTotal(){
    // reduce 条件统计
return this.todoss.reduce((p,todo)=>p+(todo.done?1:0),0)
},
isAll:{
    get(){
         return this.doneTotal===this.total && this.total>0
    },
    set(value){
        this.checkAllTodo(value)
    }
}
// isAll(){
//     return this.doneTotal===this.total && this.total>0
// }


},



methods:{
//  checkAll(e){
// this.checkAllTodo(e.target.checked)
//  }
clearAll(){
this.clearAllTodo()
}
}
}
</script>

<style>
.todo-footer label{
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}
.todo-footer label input{
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}
.todo-footer button{
    float: right;
    margin-top: 5px;
}
</style>